<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>hello world</title>

    <!-- Bootstrap -->
    <link href="${ctxPath}/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${ctxPath}/js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${ctxPath}/js/bootstrap.min.js"></script>

</head>
<body>

<table id="tableid" class="table table-bordered table-hover">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>001</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>002</td>
        <td>王谚</td>
        <td>18</td>
    </tr>
</table>

<hr>


        <nav aria-label="Page navigation">
            <ul class="pagination" id="pagehtml">

            </ul>


        </nav>


<!--<input type="text" name="username" id="username" value="aaa">-->
</body>
</html>
<script>

    /*function listPage(pagenum) {
        // var offset = 1;
        var limit = 5;
        // offset = pagenum * limit;
        var url="${ctxPath}/listPage";
        $.ajax({
            type: "post",
            url: url,
            data: {"offset":pagenum,"limit":limit},
            success:function (data) {
                var records = data.records;

                var html="<tr>" +
                    "            <th>编号</th>" +
                    "            <th>账户</th>" +
                    "            <th>姓名</th>" +
                    "        </tr>";
                var length = records.length;
                for(var i=0;i<length;i++){
                    var row = records[i];
                    html = html+ "<tr>" +
                        "            <td>" + row.id + "</td>" +
                        "            <td>"+ row.username +"</td>" +
                        "            <td>"+ row.name +"</td>" +
                        "        </tr>"
                }
                $("#tableid tbody").html(html);
                var totalPage = data.pages;
                var pagehtml = '<li class="disabled">' +
                    '                <a href="#" aria-label="Previous">' +
                    '                    <span aria-hidden="true">&laquo;</span>' +
                    '                </a>' +
                    '            </li>';
                for(var i=1;i<=totalPage;i++){
                    if(i == pagenum){
                        pagehtml+='<li class="active"><a href="#" onclick="listPage('+i+');">'+i+'</a></li>';
                    }else{
                        pagehtml+='<li><a href="#" onclick="listPage('+i+');">'+i+'</a></li>';
                    }

                }
                pagehtml+= '            <li>' +
                    '                <a href="#" aria-label="Next">' +
                    '                    <span aria-hidden="true">&raquo;</span>' +
                    '                </a>' +
                    '            </li>'+
                '<input type="text"  height="20" id="jump" >'+
                '<button type="button" class="btn btn-default" onclick="listPage(document.getElementById(\'jump\').value)">跳转</button>';

                $("#pagehtml").html(pagehtml);

            },
            error:function (msg) {
                console.log(msg);
            }
        });
    }*/

    //listPage(1); //查询列表方法

    /*personJson();
    function personJson(){
        //定义基本格式
        var person={"name":"张三","age":23,"gender":true};
        var ps=[{"name":"张三","age":23,"gender":true},
                {"name":"李四","age":24,"gender":true},
                {"name":"王五","age":25,"gender":false}];

        //使用for in 循环获取以person对象中的所有key value
        // for(var key in person){
        //     alert(key+":"+person[key]);
        // }

        //获取ps中的所有值
        // for(var i=0;i<ps.length;i++){
        //     var p=ps[i];
        //     for(var key in ps[i]){
        //         alert(key+":"+p[key]);
        //     }
        // }



    }*/

    listPage2(1);
    function listPage2(pagenum) {
        // var offset = 1;
        var limit = 5;
        // offset = pagenum * limit;
        var url="${ctxPath}/listPage2";
        $.ajax({
            type: "post",
            url: url,
            data: {"offset":pagenum,"limit":limit},
            success:function (jsonstr) {

                //js中 json字符串转json对象
                var data=JSON.parse(jsonstr);

                var records = data.records;

                var html="<tr>" +
                    "            <th>编号</th>" +
                    "            <th>账户</th>" +
                    "            <th>姓名</th>" +
                    "        </tr>";
                var length = records.length;
                for(var i=0;i<length;i++){
                    var row = records[i];
                    html = html+ "<tr>" +
                        "            <td>" + row.id + "</td>" +
                        "            <td>"+ row.username +"</td>" +
                        "            <td>"+ row.name +"</td>" +
                        "        </tr>"
                }
                $("#tableid tbody").html(html);
                var totalPage = data.pages;
                var pagehtml = '<li class="disabled">' +
                    '                <a href="#" aria-label="Previous">' +
                    '                    <span aria-hidden="true">&laquo;</span>' +
                    '                </a>' +
                    '            </li>';
                for(var i=1;i<=totalPage;i++){
                    if(i == pagenum){
                        pagehtml+='<li class="active"><a href="#" onclick="listPage('+i+');">'+i+'</a></li>';
                    }else{
                        pagehtml+='<li><a href="#" onclick="listPage('+i+');">'+i+'</a></li>';
                    }

                }
                pagehtml+= '            <li>' +
                    '                <a href="#" aria-label="Next">' +
                    '                    <span aria-hidden="true">&raquo;</span>' +
                    '                </a>' +
                    '            </li>'+
                    '<input type="text"  height="20" id="jump" >'+
                    '<button type="button" class="btn btn-default" onclick="listPage(document.getElementById(\'jump\').value)">跳转</button>';

                $("#pagehtml").html(pagehtml);

            },
            error:function (msg) {
                console.log(msg);
            }
        });
    }



</script>